<template>
  <div class="staCompreWrap">
    <NavBar
      :title="'综合统计'"
      :cityName="city"
       :areaName="''"
      :SeveralMenus="'1'"
      :text="'返回'"
      @clicksPopul="clicksPopul"
    ></NavBar>

    <van-tabs
      v-model="active"
      @change="changeTabMet"
      v-if="tabActive == 0"
      class="tabs"
    >
      <van-tab title="温度"></van-tab>
      <van-tab title="湿度"></van-tab>
      <van-tab title="降水"></van-tab>
      <van-tab style="width: 100px" title="10分钟平均"></van-tab>
      <van-tab title="极大风"></van-tab>
    </van-tabs>

    <ul class="listArea" v-if="tabActive == 0">
      <div class="listAreaTop">
        <div>{{ wendu }}</div>
        <div>{{ time }}</div>
      </div>
      <li class="listTitle listTitlecolor">
        <span class="titleOne" v-if="active != 8 && active != 9">站点</span>
        <span class="titleTwo" v-if="active == 0">气温(实时)</span>
        <span class="titleTwo" v-if="active == 0">气温(最高)</span>
        <span class="titleTwo" v-if="active == 0">气温(最低)</span>
        <span class="titleTwo" v-if="active == 1">湿度(实时)</span>
        <span class="titleTwo" v-if="active == 1">湿度(最高)</span>
        <span class="titleTwo" v-if="active == 1">湿度(最低)</span>
        <span class="titleTwo" v-if="active == 2">降水量(实时)</span>
        <span class="titleTwo" v-if="active == 2">降水量(最大)</span>
        <span class="titleTwo" v-if="active == 2">降水量(最小)</span>
        <span class="titleTwo" v-if="active == 3">10分钟平均(实时)</span>
        <span class="titleTwo" v-if="active == 3">10分钟平均(最大)</span>
        <span class="titleTwo" v-if="active == 3">10分钟平均(最小)</span>
        <span class="titleTwo" v-if="active == 4">极大风(实时)</span>
        <span class="titleTwo" v-if="active == 4">极大风(最大)</span>
        <span class="titleTwo" v-if="active == 4">极大风(最小)</span>
        <!-- <span class="titleThree" v-if="active != 8 && active != 9"
          >日期/时段</span
        > -->
        <span class="titleFour" v-if="active == 9">峰值强度</span>
        <span class="titleFour" v-if="active == 9">闪电高度</span>
        <span class="titleFour" v-if="active == 9">闪电类型</span>
        <span class="titleFour" v-if="active == 9">误差</span>
      </li>
      <template v-if="active == 0">
        <li class="listTitle" v-for="(item, index) in listData" :key="index">
          <span
            class="titleOne titleLineHeightMiddle titlename"
            @click="clickHidden(item.max.name)"
            >{{ item.max.name }}</span
          >
          <span class="titleTwo"
            ><div>{{ item.now.tem }}</div>
            <div>{{ item.now.temtime }}</div></span
          >
          <span class="titleTwo"
            ><div>{{ item.max.tem }}</div>
            <div>{{ item.max.temtime }}</div></span
          >
          <span class="titleTwo"
            ><div>{{ item.min.tem }}</div>
            <div>{{ item.min.temtime }}</div></span
          >
        </li>
      </template>
      <template v-if="active == 1">
        <li class="listTitle" v-for="(item, index) in listData" :key="index">
          <span
            @click="clickHidden(item.max.name)"
            class="titleOne titleLineHeightMiddle"
            >{{ item.max.name }}</span
          >
          <span class="titleTwo"
            ><div>{{ item.now.rhu }}</div>
            <div>{{ item.now.rhutime }}</div></span
          >
          <span class="titleTwo"
            ><div>{{ item.max.rhu }}</div>
            <div>{{ item.max.rhutime }}</div></span
          >
          <span class="titleTwo"
            ><div>{{ item.min.rhu }}</div>
            <div>{{ item.min.rhutime }}</div></span
          >
        </li>
      </template>
      <template v-if="active == 2">
        <li class="listTitle" v-for="(item, index) in listData" :key="index">
          <span
            @click="clickHidden(item.max.name)"
            class="titleOne titleLineHeightMiddle"
            >{{ item.max.name }}</span
          >
          <span class="titleTwo"
            ><div>{{ item.now.pre }}</div>
            <div>{{ item.now.pretime }}</div></span
          >
          <span class="titleTwo"
            ><div>{{ item.max.pre }}</div>
            <div>{{ item.max.pretime }}</div></span
          >
          <span class="titleTwo"
            ><div>{{ item.min.pre }}</div>
            <div>{{ item.min.pretime }}</div></span
          >
        </li>
      </template>
      <template v-if="active == 3">
        <li class="listTitle" v-for="(item, index) in listData" :key="index">
          <span
            @click="clickHidden(item.max.name)"
            class="titleOne titleLineHeightMiddle"
            >{{ item.max.name }}</span
          >
          <span class="titleTwo"
            ><div>{{ item.now.win_s_avg_10mi }}</div>
            <div>{{ item.now.win_s_avg_10mi_time }}</div></span
          >
          <span class="titleTwo"
            ><div>{{ item.max.win_s_avg_10mi }}</div>
            <div>{{ item.max.win_s_avg_10mi_time }}</div></span
          >
          <span class="titleTwo"
            ><div>{{ item.min.win_s_avg_10mi }}</div>
            <div>{{ item.min.win_s_avg_10mi_time }}</div></span
          >
        </li>
      </template>
      <template v-if="active == 4">
        <li class="listTitle" v-for="(item, index) in listData" :key="index">
          <span
            @click="clickHidden(item.max.name)"
            class="titleOne titleLineHeightMiddle"
            >{{ item.max.name }}</span
          >
          <span class="titleTwo"
            ><div>{{ item.now.win_s_inst_max }}</div>
            <div>{{ item.now.win_s_inst_max_time }}</div></span
          >
          <span class="titleThree"
            ><div>{{ item.max.win_s_inst_max }}</div>
            <div>{{ item.max.win_s_inst_max_time }}</div></span
          >
          <span class="titleThree"
            ><div>{{ item.min.win_s_inst_max }}</div>
            <div>{{ item.min.win_s_inst_max_time }}</div></span
          >
        </li>
      </template>
      <template v-if="active == 5">
        <li
          class="listTitle"
          v-for="(item, index) in listData"
          v-if="item.rhuyear == '年最低湿度'"
          :key="index"
        >
          <span class="titleOne titleLineHeightMiddle">{{
            item.skzdzsCnty
          }}</span>
          <span class="titleTwo titleLineHeightMiddle">{{
            item.skzdzsRhu
          }}</span>
          <span class="titleThree">{{ item.rhuTime }}</span>
        </li>
      </template>
      <template v-if="active == 6">
        <li
          class="listTitle"
          v-for="(item, index) in listData"
          v-if="item.winyear == '年最大极大风速'"
          :key="index"
        >
          <span class="titleOne titleLineHeightMiddle">{{
            item.skzdzsCnty
          }}</span>
          <span class="titleTwo titleLineHeightMiddle">{{
            item.winsinstmax
          }}</span>
          <span class="titleThree">{{ item.wintime }}</span>
        </li>
      </template>

      <template v-if="active == 7 && histtemInfo.历史最高温">
        <li class="listCon">
          <span>{{ histtemInfo.历史最高温.histtemCity }}，</span>
          <span>于 {{ histtemInfo.历史最高温.histtemMaxtime }} 有</span>
          <span>历史最高温：{{ histtemInfo.历史最高温.histtemMaxtem }} ℃</span>
        </li>
        <li class="listCon">
          <span>{{ histtemInfo.历史最低温.histtemCity }}，</span>
          <span>于 {{ histtemInfo.历史最低温.histtemMaxtime }} 有</span>
          <span>历史最低温：{{ histtemInfo.历史最低温.histtemMaxtem }} ℃</span>
        </li>
      </template>
      <template v-if="active == 8">
        <li class="listTitle" v-for="(item, index) in listData" :key="index">
          <span class="titleFour">{{ item.ldsjFzqd }}</span>
          <span class="titleFour">{{ item.ldsjSdgd }}</span>
          <span class="titleFour">{{ item.ldsjSdlx }}</span>
          <span class="titleFour">{{ item.ldsjWc }}</span>
        </li>
      </template>
    </ul>
    <div class="elementArea" v-if="tabActive == 1">
      <div id="map" style="width: 100%; height: 100%"></div>
    </div>
    <div class="elementListArea" v-if="tabActive == 1 && loadingSuc">
      <div
        class="elementList"
        v-for="(item, index) in locationInfo"
        :key="index"
      >
        <div class="elementListLine">
          <span>{{ ++index }}.</span><span>{{ item.locationName }}：</span>
        </div>
        <div class="elementListLine">
          <span>温度：</span><span>{{ item.lapsTem.toFixed(2) }}</span>
          <span>，露点温度：</span><span>{{ item.lapsLdtem.toFixed(2) }}</span>
        </div>
        <div class="elementListLine">
          <span>相对湿度：</span><span>{{ item.lapsXdsd.toFixed(2) }}</span>
        </div>
        <div class="elementListLine">
          <span>1小时累计降水量：</span
          ><span>{{ item.lapsJslyxs.toFixed(2) }}</span>
        </div>
        <div class="elementListLine">
          <span>2分钟平均风向：</span
          ><span>{{ item.lapsWinddirect.toFixed(2) }}</span>
        </div>
        <div class="elementListLine">
          <span>2分钟平均风速：</span
          ><span>{{ item.lapsWindspeed.toFixed(2) }}</span>
        </div>
        <div class="elementListLine">
          <span>u风分量：</span><span>{{ item.lapsUcom.toFixed(2) }}</span>
          <span>，v风分量：</span><span>{{ item.lapsVcom.toFixed(2) }}</span>
        </div>
        <div class="elementListLine">
          <span>时间：</span><span>{{ item.lapsTime }}</span>
        </div>
      </div>
    </div>

    <van-popup
      v-model="showBtnDetailPop"
      position="top"
      :style="{ width: '100%', height: '50%' }"
    >
      <btnDetail
        v-if="showBtnDetailPop"
        :btnDetailType="btnDetailType"
      ></btnDetail>
    </van-popup>
    <comCity
      v-if="showComCity"
      @confirmEmit="confirmEmitCityMet"
      @closeEmit="showComCity = false"
      :arr="arr"
    ></comCity>
  </div>
</template>
<script type="text/javascript">
import meteoroStaCompreApi from "@/service/staCompre.js";
import btnDetail from "@/components/staCompre/btnDetail.vue";
import comCity from "@/components/common/city.vue";
import point from "@/assets/point.png";
import Vue from "vue";
import { Lazyload, Swipe, SwipeItem } from "vant";
import { getItem, setItem } from "../util/storage.js";
Vue.use(Lazyload);
Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
  data() {
    return {
      active: 0,
      tabActive: 0,
      wendu: "温度(℃)",
      showBtnDetailPop: false,
      btnDetailType: "",
      listData: {},
      histtemInfo: {},
      city: "",
      showComCity: false,
      LongAndLati: {
        lng: "",
        lat: "",
      },
      picture: {
        point: point,
      },
      locationInfo: [],
      loadingSuc: false,
      time: "",
      arr: [],
      areaName:''
    };
  },
  filters: {
    filterByCategory: function (items, category) {},
  },
  mounted() {
    var location = getItem("location");
    this.city = location[1].name;
    this.areaName = location[2].name;
    this.arr = [this.city];
    this.LongAndLati.lng = this.$store.getters.cityLongAndLati[0];
    this.LongAndLati.lat = this.$store.getters.cityLongAndLati[1];
    this.initApi();
    var currentDate = new Date();
    this.time = this.$util.getTime(currentDate, "ymd");
  },
  watch: {},
  components: {
    btnDetail,
    comCity,
  },
  methods: {
    clickHidden(name) {
      this.$toast(name);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      if (this.tabActive == 1) {
        this.$toast("此菜单下，请点击地图！");
        return;
      }
      this.showComCity = true;
    },
    clicksPopul() {
      this.showComCity = true;
    },

    initApi() {
      //24小时最高/最低温度
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      var currentDate = new Date();
      this.time = this.$util.getTime(currentDate, "ymd");

      var params = {
        city: this.city,
        localDate: this.time,
      };

      meteoroStaCompreApi
        .ComprehensiveStatistics(params)
        .then((res) => {
          if (this.active == 0) {
            res = res.filter((it) => {
              if (
                it.now.tem != undefined &&
                it.max.tem != undefined &&
                it.min.tem != undefined
              ) {
                return it;
              }
            });
            this.listData = res;
          }

          this.$toast.clear();
        })
        .catch((error) => {
          console.log(error);
          this.$toast.clear();
        });
    },
    confirmEmitCityMet(value) {
      this.showComCity = false;
      this.city = value;
      this.arr = [this.city];
      //   this.active = 0
      //   this.changeTabMet(0)
      this.initApi();
    },
    showBtnDetail(type) {
      this.btnDetailType = type;
      this.showBtnDetailPop = true;
    },

    changeTabMet(name) {
      if (name == 0) {
        (this.wendu = "温度(℃)"), this.initApi();
      } else if (name == 1) {
        this.listData = this.listData.filter((it) => {
          if (
            it.now.rhu != undefined &&
            it.max.rhu != undefined &&
            it.min.rhu != undefined
          ) {
            return it;
          }
        });
        this.wendu = "湿度(Rh)";
      } else if (name == 2) {
        this.listData = this.listData.filter((it) => {
          if (
            it.now.pre != undefined &&
            it.max.pre != undefined &&
            it.min.pre != undefined
          ) {
            return it;
          }
        });

        this.wendu = "降水(mm)";
      } else if (name == 3) {
        this.listData = this.listData.filter((it) => {
          if (
            it.now.win_s_avg_10mi != undefined &&
            it.max.win_s_avg_10mi != undefined &&
            it.min.win_s_avg_10mi != undefined
          ) {
            return it;
          }
        });
        this.wendu = "10分钟平均风(m/s)";
      } else if (name == 4) {
        this.wendu = "极大风(m/s)";
        this.listData = this.listData.filter((it) => {
          if (
            it.now.win_s_inst_max != undefined &&
            it.max.win_s_inst_max != undefined &&
            it.min.win_s_inst_max != undefined
          ) {
            return it;
          }
        });
      }
    },

    onChange(index) {
      if (this.tabActive == 1) {
        this.$nextTick(() => {
          this.getLapsByIdApi();
          this.initMap();
        });
      }
    },
    getLapsByIdApi() {
      this.loadingSuc = false;
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      var params = {
        x: this.LongAndLati.lng,
        y: this.LongAndLati.lat,
      };
      this.locationInfo = [];
      meteoroStaCompreApi
        .getLapsById(params)
        .then((res) => {
          //获取根据经纬度，获取地理位置
          if (res && res.length != 0) {
            res.forEach(async (item) => {
              let itemLocation =
                await this.$util.lngLatToLocationFormattedAddress(
                  item.lon,
                  item.lat
                );
              item.locationName = itemLocation;
              this.locationInfo.push(item);
            });
          }
          this.loadingSuc = true;
          this.$toast.clear();
        })
        .catch((error) => {
          this.$toast.clear();
        });
    },
    initMap() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      var _this = this;
      let map = new SGMap.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: "aegis://styles/aegis/Streets-v2",
        // 默认缩放层级
        zoom: 5,
        // 地图中心点
        center: [_this.LongAndLati.lng, _this.LongAndLati.lat],
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei",
      });
      // 监听地图加载完成事件
      // 地图事件请参考文档 https://map.sgcc.com.cn/products/js-sdk/v3/doc.html#Events
      map.on("load", function (e) {
        console.log("地图加载完成");
        _this.$toast.clear();
        _this.addMarker(map);
        //添加监听事件
        map.on("click", function (e) {
          _this.LongAndLati.lng = e.lngLat.lng;
          _this.LongAndLati.lat = e.lngLat.lat;
          _this.clickMet(map);
        });
      });
    },
    // 添加Marker点
    addMarker(map) {
      var _this = this;
      //画marker点
      var el = document.createElement("div");
      el.className = "marker";
      el.style.backgroundImage = `url("${this.picture["point"]}")`;
      el.style.width = "35px";
      el.style.height = "30px";
      el.style.backgroundSize = "contain";
      _this.elMarker = new SGMap.Marker({
        element: el,
        anchor: "bottom",
      })
        .setLngLat([_this.LongAndLati.lng, _this.LongAndLati.lat])
        .addTo(map);
    },
    async clickMet(map) {
      //去除marker
      if (this.elMarker) {
        this.elMarker.remove();
        this.elMarker = undefined;
      }
      //设置marker点
      this.addMarker(map);
      //点击位置
      this.clickLocation = await this.$util.lngLatToLocation(
        this.LongAndLati.lng,
        this.LongAndLati.lat
      );
      //请求数据
      this.getLapsByIdApi();
    },
  },
};
</script>
<style type="text/css" lang="less" scoped>
/deep/ .van-nav-bar__content {
  background: #357cff;
}
/deep/ .van-swipe {
  height: 70%;
}
.rights {
  color: #fff;
}
.staCompreWrap {
  overflow: hidden;
  .tabs {
    position: absolute;
    background: #ffffff;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.08);
    left: 0px;
    right: 0px;
  }
  .echartst {
    width: 100%;
    margin-top: 50px;
    height: 50%;
    background: #ffffff;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.08);
  }
  .pageCover();

  background-repeat: no-repeat;
  background-size: cover;

  .btnArea {
    margin: 10px;
    background: white;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    .btnLine {
      margin-bottom: 10px;
    }
    .btnLine:last-child {
      margin-bottom: 0px;
    }
    .btnLineSmall {
      margin-right: 10px;
    }
  }
  .titleArea {
    position: relative;
    left: 9px;
    top: 0;
    img {
      width: 95%;
    }
    .titleCon {
      position: absolute;
      top: 6px;
      .px2rem(left, 25px);
      color: white;
      font-size: 16px;
      font-weight: bold;
    }
    .staDistime {
      position: absolute;
      left: 35px;
      .px2rem(top, 50px);
      color: white;
    }
  }
  .listArea {
    position: absolute;
    width: 100%;
    /* left: 10px; */
    /* right: 10.3px; */
    // /* top: 300px; */
    height: 90%;
    top: 100px;
    overflow: scroll;
    padding-bottom: 32px;
    background: white;
    .listAreaTop {
      font-size: 12px;
      color: #a4a4a4;
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
    }
    .listTitle {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #101010;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      span {
        float: left;
        width: 33.33%;
        text-align: center;
      }
      span.titleFour {
        width: 25%;
      }
      .titleOne {
        width: 30%;
      }
      .titleTwo {
        width: 36.66%;
      }
      .titleLineHeightMiddle {
        line-height: 36.8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .listTitle:first-child {
      font-size: 13px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #101010;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .listTitle:nth-child(2n) {
      background: #f7f7f7;
    }

    .listCon {
      font-size: 16px;
      padding: 10px;
      margin-bottom: 10px;
    }
  }
  .elementArea {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 56px;
    height: 200px;
    background: white;
    border-radius: 10px;
    padding: 10px;
  }
  .elementListArea {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 286px;
    bottom: 60px;
    background: white;
    border-radius: 10px;
    padding: 10px;
    overflow: scroll;
    .elementList {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ececec;
    }
    .elementListLine {
      font-size: 14px;
      padding: 5px 0;
    }
    .elementList:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
  }
  /deep/ .van-tabs {
  }
  /deep/ .van-tab--active {
    color: #1989fa;
  }
  /deep/ .van-tabs--line /deep/ .van-tabs__wrap {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}

.bottomCon {
  color: white;
  position: absolute;
  bottom: 3%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 14px;
}
</style>
